<template>
	<view class="consoleDetails">
		<u-loading-page :loading="load" loading-text="loading..." bg-color="#fff"></u-loading-page>

		<!-- 数据为空展示 -->
		<u-empty mode="data" v-if="!load && !productList.length"></u-empty>
		<tui-card v-for="(item,i) in productList" :key="i">
			<template v-slot:body>
				<!-- 管理 -->
				<u-cell-group customStyle="background-color: #fff">
					<u-cell :title="item.product_name" :isLink="true" @click="goProductInfo(item)"></u-cell>
					<u-row customStyle="height: 80px">
						<u-col span="4" textAlign="center">
							<view class="details">
								<span class="balance-text">{{item.domain}}</span>
							</view>
							<view class="details">
								<u-tag :text="initState(item.domainstatus)" plain shape="circle"
									:color="colorConfig[item.domainstatus]" size="mini"></u-tag>
							</view>
						</u-col>
						<u-col span="8" textAlign="center">
							<view class="details">
								<span class="region-text detailsState">到期时间：<span
										class="detailsTotal">{{initDate(item.regdate)}}</span></span>
							</view>

							<view class="details">
								<span class="region-text detailsState">备注：<span
										class="detailsTotal">{{item.remark ? item.remark :'暂无备注'}}</span></span>
							</view>
						</u-col>
					</u-row>
				</u-cell-group>
			</template>
		</tui-card>
	</view>
</template>

<script>
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	export default {
		components: {
			tuiCard
		},
		data() {
			return {
				productList: [],
				colorConfig: {
					Active: "#3fbf70",
					Cancelled: "#959799",
					Deleted: "#2d2d2d",
					Fraud: "#FF0000",
					Pending: "#fca426",
					Suspended: "#e31519"
				},
				load: false
			}
		},
		methods: {
			async getProductListInfo(id) {
				this.load = true
				const result = await uni.$http.get('/v1/hosts?cate_id=' + id)
				console.log(result)
				if (result.data.status !== 200) return uni.$showMsg()
				this.productList = result.data.data.host
				console.log(this.productList)
				this.load = false
			},
			initDate(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() + ' ';
				return Y + M + D;
			},
			initState(state) {
				if (state == 'Pending') {
					return '待开通'
				} else if (state == 'Suspended') {
					return "已暂停"
				} else if (state == 'Fraud') {
					return "有欺诈"
				} else if (state == 'Deleted') {
					return "被删除"
				} else if (state == 'Cancelled') {
					return '被取消'
				} else if (state == 'Active') {
					return "已激活"
				}
			},
			goProductInfo(item) {
				uni.navigateTo({
					url: '/subpages/productInfo/productInfo?id=' + item.id
				})
			}
		},
		onLoad: function(option) {
			const id = option.id
			this.getProductListInfo(id)
		}
	}
</script>

<style lang="scss">
	.consoleDetails {
		min-height: 100vh;
		background-color: #f5f5f5;
		box-sizing: border-box;
		margin-top: -2px;
	}

	.u-tag-wrapper {
		/deep/.u-tag--primary--plain.data-v-1481d46d {
			border-color: unset !important
		}
	}

	.tui-card {
		margin: 30rpx 30rpx !important;
		border-radius: 20rpx !important;

		.u-icon__icon {
			color: #3578e9 !important;
		}
	}

	/deep/.tui-card-header {
		padding: unset !important;
	}

	.details {
		margin: 15rpx;
		display: flex;
		justify-content: space-evenly;

		.detailsState {
			font-size: 30rpx;
			color: #7c878e;

			.detailsTotal {
				color: #000;
			}
		}
	}
</style>
